<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
	</head>

	<body>
		<div id="container">
			<div id="header">
				<h1><em>While there is life there is hope</em></h1>
				<h3>软件和教堂非常相似--建成之后我们就在祈祷！</h3>
			</div>
			<div id="content">
			</div>
			<div class="tcdPageCode">
			</div>
		</div>

		<script src="js/jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/template-web.js"></script>
		<script type="text/javascript" src="js/page.js"></script>
		<script>
			(function($) {
				var url = 'http://imoocnote.calfnote.com/inter/getClasses.php';
				getJsonData(url, 1);
				$.getJSON(url, {curPage: 1}, function(data) {
			        var pageCount = parseInt(data.totalCount)
			        // 生成分页代码
			        $(".tcdPageCode").createPage({
			            pageCount: pageCount,
			            current: 1,
			            backFn: function (p) {
			                getJsonData(url, p)
			            }
			        })
			   })
			})(jQuery);

			function getJsonData(url, curPage) {
				$.getJSON(url, {curPage: curPage}, function(data) {
					var strHtml = template('content-template', data);
					$("#content").html(strHtml);
				})
			}
		</script>
		<script id="content-template" type="text/html">
			<ul class="clearfix">
				{{each data}}
				<li>
					<img src="{{$value.image}}" alt="{{$value.title}}">
					<div class="clearfix">
						<h3 class="title" title="{{$value.title}}">{{$value.title}}</h3> {{if hasnote==1}}
						<span class="hasnote">(有笔记)</span> {{/if}}
					</div>
					<small class="subtitle">{{$value.subtitle}}</small>
					<div class="timespan {{if timespan}} long {{else}} short {{/if}}">时间：{{$value.timespan}}</div>
				</li>
				{{/each}}
			</ul>
		</script>
	</body>

</html>